<template>


  <el-card>

    <el-row>

      <el-col :span="8">
        <el-row>
          <el-col :span="24">
            <span class="setFont">选择阳历时间：</span>
            <!--这个组件会报 Avoid mutating a prop directly since the,添加 placement="bottom-start" -->
            <el-date-picker v-model="solarTime" placement="bottom-start" :size="size" type="date" placeholder="选择日期"></el-date-picker>

            <el-button type="primary" :size="size" @click="solarToLunar">转换</el-button>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div v-if="lunarTime">
              <p>
                当前时间：
                <el-tag size="small" effect="plain">{{lunarTime.date}}</el-tag>&nbsp;
                <el-tag size="small" effect="plain">星期{{lunarTime.week}}</el-tag>&nbsp;
              </p>
              <p>
                生肖：
                <el-tag size="small" effect="plain">{{lunarTime.chineseZodiac}}</el-tag>&nbsp;
              </p>
              <p v-if="lunarTime.jieQi">
                节气：
                <el-tag size="small" effect="plain">{{lunarTime.jieQi}}</el-tag>&nbsp;
              </p>
              <p>
                阴历：
                <el-tag size="small" effect="plain">{{lunarTime.lunarStr}}</el-tag>&nbsp;
                <el-tag size="small" effect="plain">{{ lunarTime.yearLunar }}-{{ lunarTime.monthLunar }}-{{ lunarTime.dayLunar }}</el-tag>
              </p>
            </div>
          </el-col>
        </el-row>

      </el-col>

      <el-col :span="8">
        <el-image fit="contain" :src="require('@/assets/images/toolbox/casement.gif')"></el-image>
      </el-col>

      <el-col :span="8">
        <el-alert
          title="小知识"
          type="info"
          :closable="false"
          description="阴历在中国传统历法中主要指按月球的月相周期变化来安排的历法，即以朔望月作为确定历月的基础，一年为十二个历月的一种历法。">
        </el-alert>

        <el-alert
          title=""
          type="info"
          :closable="false"
          description="因朔望月较之回归年易于观测，远古的历法几乎都是阴历。因为地球绕太阳一周为三百六十五天，而十二个阴历月只有约三百五十四天，故古人以增置闰月来解决这一问题。中国的历法自古就是一种阴阳历。因为每月初一为新月，十五为圆月，易于辨识，使用方便，所以通常称这种历法为阴历。直到今天，由于历法中有节气变化，跟农业种植活动密切相关，故“阴历”在国人尤其是农民的生活中起着举足轻重的作用。">
        </el-alert>

      </el-col>

    </el-row>

  </el-card>

</template>

<script>

  import http from '@/utils/http'

  export default {
    // 阳历转阴历工具
    name: "SolarToLunar",
    data(){
      return {
        // 阳历
        solarTime: null,
        // 转换后的阴历
        lunarTime: null,
        // 输入框和按钮的大小
        size: 'mini',
      }
    },
    methods: {
      /**
       * 根据字符串日期转换为阴历
       */
      solarToLunar(){
        http.post("/home/solarToLunar", {
          solar: this.solarTime,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.lunarTime = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.$store.commit('navigationListChange', ['工具箱', '阳历转阴历'])
    }
  }
</script>

<style scoped>

  .setFont{
    font-size: 14px
  }

</style>
